<template>
	<div>

		<div class="app-container">

			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />

			<div>
				<el-button v-prmis="'goods_hit_exportBySku'" type="primary"
					@click="getspread('1')">{{ $t('report.stock.export') }}</el-button>
				<el-button v-prmis="'goods_hit_exportByMachine'" type="primary"
					@click="getspread('2')">{{ $t('report.stock.export2')}}</el-button>
			</div>

		</div>

		<div class="app-container" v-loading="data.mtloading">

			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">

				<el-table-column prop="g_name" :label="$t('machine.goods.name')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.g_name || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="sku" label="SKU" show-overflow-tooltip>
					<template #default="scope">
						<el-link type="primary" :underline="false" @click="gotogoods(scope.row.sku)">{{ scope.row.sku ||
							'--' }}</el-link>
					</template>
				</el-table-column>

				<el-table-column prop="hits" :label="$t('report.grouping.hit')" show-overflow-tooltip>
					<template #default="scope">
						<el-link type="primary" :underline="false"
							@click="getgoods(scope.row.g_id, scope.row.g_name)">{{ scope.row.hits || '0' }}</el-link>
					</template>
				</el-table-column>

				<el-table-column prop="saleNum" :label="$t('home.salesVolume')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.saleNum || '0' }}
					</template>
				</el-table-column>

				<el-table-column prop="conversion_rate" :label="$t('report.grouping.rate')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.conversion_rate || '--' }}
					</template>
				</el-table-column>

			</el-table>

			<PageNum :total="data.total" :page="data.intive" @exposeData="current" @fraction="fraction" />

		</div>

		<el-dialog v-model="data.demonstrate" :title="data.title" center width="40%">

			<el-table :data="data.maclist" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" height="450" class="w-full" v-loading="data.deloading">

				<el-table-column prop="machine_id" :label="$t('machine.code')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.machine_id || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="machine_name" :label="$t('machine.name')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.machine_name || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="create_time" :label="$t('report.grouping.clickDate')" show-overflow-tooltip>
					<template #default="scope">
						{{ level.gettime(scope.row.create_time, 1) }}
					</template>
				</el-table-column>

				<el-table-column prop="hits" :label="$t('report.grouping.clickCount')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.hits || '0' }}
					</template>
				</el-table-column>

			</el-table>

			<PageNum :total="data.mctotal" :page="data.mctive" @exposeData="mcurrent" @fraction="mcfraction" />

		</el-dialog>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false" />
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import level from "@/utils/level";
import { gethitList, getmacHitList, exporthitBySku, exportByMachine } from '@/api/report';
import { ElMessage, ElMessageBox } from "element-plus";
import exports from '@/components/export.vue';
import router from '@/router';
const dialogExport = ref(false)
let data = reactive({
	mtloading: false, // 加载
	deloading: false, // 弹窗加载
	demonstrate: false, // 弹窗
	title: '', // 弹窗标题
	lookup: [ // 筛选栏
		{ title: $t('machine.code'), type: 'mId', value: '', key: 'm_id' },
		{ title: $t('date.inventoryTime'), type: 'time', value: '', key: 'create_time' },
		{ title: 'SKU', type: 'input', value: '', key: 'sku' },
	],
	list: [], // 列表信息
	maclist: [], // 点击的设备列表数据
	intive: { // 筛选数据
		m_id: '',
		create_time: '',
		sku: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
	mctive: {
		g_id: '',
		page: 1,
		pageNum: 15
	},
	mctotal: 0, // 总条数
})

// 获取列表信息
let getlist = () => {
	data.mtloading = true
	gethitList(data.intive).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 前往商品列表
let gotogoods = (e) => {
	let query = {
		l: e || ''
	}
	router.push({path: '/goods/info', query })
	// let url = '/#/goods/info?l=' + query.l
	// window.open(url, '_blank')
}

// 查看点击数
let getgoods = (e, k) => {
	data.deloading = true
	data.demonstrate = true

	if (e != true) {
		data.mctive.page = 1
		data.mctive.pageNum = 15
		data.title = k
		data.mctive.g_id = e
	}

	getmacHitList(data.mctive).then(res => {
		data.deloading = false
		if (res.state == 200) {
			data.maclist = res.data.data
			data.mctotal = res.data.total
		}
	})
}

// 导出
let getspread = (e) => {
	ElMessageBox.confirm($t('message.isExport')).then(res => {
		getexcel(e)
	}).catch(err => {
		console.log('取消')
	})
}

// 触发导出
let getexcel = async (e) => {
	let obj = {
		m_id: data.intive.m_id,
		sku: data.intive.sku,
		create_time: data.intive.create_time,
	}

	let res = ''

	if (e == '1') {
		res = await exporthitBySku(obj)
	} else {
		res = await exportByMachine(obj)
	}

	if (res.state == 200) {
		dialogExport.value = true
	} else {
		ElMessage({
			message: $t('message.network'),
			type: 'error'
		})
	}

}

// 查询回调
let inves = (e) => {
	data.intive.create_time = ''
	for (let key in e) {
		if (key != 'create_time') {
			data.intive[key] = e[key]
		}
	}
	if (e.create_time != '') {
		data.intive.create_time = e.create_time[0] + '~' + e.create_time[1]
	}

	data.intive.page = 1
	data.intive.pageNum = 15
	getlist()
}

// 页数回调
let current = (e) => {
	data.intive.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.intive.pageNum = e
	getlist()
}

// 弹窗页数回调
let mcurrent = (e) => {
	data.mctive.page = e
	getgoods(true)
}

// 弹窗条数回调
let mcfraction = (e) => {
	data.mctive.pageNum = e
	getgoods(true)
}

getlist()

</script>
